/**
 * 设计系统变量定义
 * 基于现代化设计原则，提供统一的视觉规范
 */

/* ====== 颜色系统 ====== */

/* 主题色彩 */
$primary-color: #1890ff;           // 主要品牌色
$primary-light: #40a9ff;          // 主色-浅
$primary-dark: #096dd9;           // 主色-深
$primary-gradient: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);

/* 功能色彩 */
$success-color: #52c41a;          // 成功色
$warning-color: #faad14;          // 警告色
$error-color: #ff4d4f;           // 错误色
$info-color: #1890ff;            // 信息色

/* 中性色彩 */
$white: #ffffff;
$gray-50: #fafafa;
$gray-100: #f5f5f5;
$gray-200: #f0f0f0;
$gray-300: #d9d9d9;
$gray-400: #bfbfbf;
$gray-500: #8c8c8c;
$gray-600: #595959;
$gray-700: #434343;
$gray-800: #262626;
$gray-900: #1f1f1f;
$black: #000000;

/* 文字颜色 */
$text-primary: #262626;           // 主要文字
$text-secondary: #595959;        // 次要文字
$text-muted: #8c8c8c;            // 静音文字
$text-disabled: #bfbfbf;         // 禁用文字
$text-placeholder: #bfbfbf;      // 占位文字
$text-white: #ffffff;            // 白色文字

/* 背景色 */
$bg-primary: #ffffff;            // 主背景
$bg-secondary: #fafafa;          // 次背景
$bg-disabled: #f5f5f5;          // 禁用背景
$bg-mask: rgba(0, 0, 0, 0.45);  // 遮罩背景

/* 边框色 */
$border-color: #d9d9d9;          // 默认边框
$border-light: #f0f0f0;          // 浅色边框
$border-dark: #bfbfbf;           // 深色边框

/* ====== 尺寸系统 ====== */

/* 间距 */
$spacing-xs: 8rpx;               // 极小间距
$spacing-sm: 16rpx;              // 小间距
$spacing-md: 24rpx;              // 中等间距
$spacing-lg: 32rpx;              // 大间距
$spacing-xl: 48rpx;              // 极大间距
$spacing-xxl: 64rpx;             // 超大间距

/* 字体大小 */
$font-size-xs: 20rpx;            // 极小字体
$font-size-sm: 24rpx;            // 小字体
$font-size-base: 28rpx;          // 基础字体
$font-size-lg: 32rpx;            // 大字体
$font-size-xl: 36rpx;            // 极大字体
$font-size-xxl: 48rpx;           // 超大字体

/* 行高 */
$line-height-sm: 1.2;
$line-height-base: 1.5;
$line-height-lg: 1.8;

/* 圆角 */
$border-radius-sm: 8rpx;         // 小圆角
$border-radius-base: 12rpx;      // 基础圆角
$border-radius-lg: 16rpx;        // 大圆角
$border-radius-xl: 24rpx;        // 极大圆角
$border-radius-round: 50%;       // 圆形

/* 阴影 */
$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
$shadow-base: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
$shadow-md: 0 6rpx 20rpx rgba(0, 0, 0, 0.10);
$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
$shadow-xl: 0 16rpx 48rpx rgba(0, 0, 0, 0.16);

/* ====== 动画系统 ====== */
$transition-base: all 0.3s ease;
$transition-fast: all 0.2s ease;
$transition-slow: all 0.5s ease;

/* ====== 响应式断点 ====== */
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* ====== Z-index 层级 ====== */
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

/* ====== 特殊效果 ====== */
$backdrop-filter: blur(20rpx);   // 毛玻璃效果